<template>
  <view @tap.stop>
    <uni-popup ref="popupRef" type="bottom" :safe-area="false" @change="change">
      <view class="popup">
        <view v-if="form.select.search || false" class="search">
          <input
            class="search-input"
            :placeholder="form.select.placeholder || '请输入搜索内容'"
            @input="input"
            v-model="searchValue"
          />
          <view class="btns btns-search" @tap="search">搜索</view>
          <view
            v-if="form.select.add || false"
            class="btns btns-add"
            @tap="add"
          >
            新增
          </view>
        </view>
        <scroll-view class="scroll-view" scroll-y @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper">
          <view
            class="btn item"
            v-for="(item, index) in form.select.options"
            :key="index"
            @tap="choose(item)"
          >
            {{ item[form.select.name || 'name'] }}
          </view>
        </scroll-view>
        <view class="btn cancel" @tap="cancel">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { watch, ref } from 'vue'

export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    }
  },
  emits: ['update:modelValue'],
  setup(props, context) {
    console.log('props', props)
    const popupRef = ref(null)

    watch(props, () => {
      if (props.modelValue) {
        popupRef.value.open()
      }
    })
    //触顶
    const scrolltoupper = () => {
      // props.form.select.scrolltoupper()
    }
    //触底事件
    const scrolltolower = () => {
      props.form.select.scrolltolower()
    }
    const change = (e) => {
      if (!e.show) {
        context.emit('update:modelValue', false)
      }
    }

    // 搜索
    const searchValue = ref('')
    const search = () => {
      if (props.form.select.searchEvent) {
        props.form.select.searchEvent(searchValue.value)
      } else {
        console.warn('请在 select 中配置 searchEvent')
      }
    }

    // 输入框
    const input = (e) => {
      if (!e.target.value) search()
    }

    // 新增
    const add = () => {}

    // 取消
    const cancel = () => {
      popupRef.value.close()
    }

    // 选择
    const choose = (item) => {
      if (props.form.select.changeEvent) {
        props.form.select.changeEvent(item)
      } else {
        return console.warn('请在 select 中配置 changeEvent')
      }
      popupRef.value.close()
    }

    return {
      popupRef,
      change,
      searchValue,
      search,
      input,
      add,
      cancel,
      choose,
      scrolltolower,
      scrolltoupper
    }
  }
}
</script>

<style lang="less" scoped>
.popup {
  overflow: hidden;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #f8f8f8;
  .search {
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 72rpx;
    margin: 20rpx auto;
    .search-input {
      flex: 1;
      height: 100%;
      background: #ffffff;
      border-radius: 40rpx;
      text-align: center;
    }
    .btns {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120rpx;
      height: 60rpx;
      margin-left: 20rpx;
      border-radius: 40rpx;
      font-weight: 500;
      color: #ffffff;
    }
    .btns-search {
      background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    }
    .btns-add {
      background: linear-gradient(90deg, #4ee183 0%, #26bf4c 100%);
    }
  }
  .scroll-view {
    max-height: 50vh;
    background-color: #fff;
    .item {
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .btn {
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 32rpx;
    color: #111111;
  }
  .cancel {
    margin-top: 12rpx;
    background-color: #fff;
  }
}
</style>
